<script setup>
import {getQuestionType} from "../../utils/QuestionUtil.js";
import {ref, watch} from "vue";
import SimpleWangEditor from "../../components/SimpleWangEditor.vue";
import {Message, Modal} from "@arco-design/web-vue";
import __ from 'lodash'
import {getQuestionTypeText} from "../../utils/CommonsUtil.js";
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {
      return {}
    }
  },
  delQuestion:{
      type:Function,
      default:()=>{}
  },
  orderList:{
      type:Array,
      default:()=>[]
  },
  changeOrder:{
      type:Function,
      default:()=>{}
  }
})
const form = ref({
    content: '',
    value: ''
})
const wangeditor = ref()
const visible = ref(false)
const deleteModal = ref(false)
const emit = defineEmits(['update:modelValue'])
const isUpdate = ref(false)
const currIndex = ref(-1)
const currDelIndex = ref(-1)
const currentOrder = ref(1)

const openOption = (data,index) => {
    console.log(data,index,currIndex.value)
    if (data && index >= 0){
        isUpdate.value = true;
        currIndex.value = index
        form.value = {...data}
        wangeditor.value.setEditorHtml(data.content)
    }else{
        isUpdate.value = false;
        form.value = {
            value: '',
            content: ''
        }
        wangeditor.value.setEditorHtml('')
    }
    visible.value = true;

}
const handleBeforeOk = () => {
    if (__.isEmpty(form.value.value) || __.isEmpty(form.value.content)){
        Message.error('请填写Value和内容')
        return false
    }
    if (!isUpdate.value){
        console.log('新增',form.value)
        //判断Value值是否已经存在
        if (props.modelValue.options.find(item => item.value === form.value.value)){
            Message.error('Value值已经存在')
            visible.value = true;
            return false
        }
        props.modelValue.options.push({
            value: form.value.value,
            content: form.value.content
        })
        //重新排序
        props.modelValue.options.forEach((item,index) => {
            item.orders = index + 1
        })
    }else{
        //判断Value值是否已经存在 排除自身的情况下
        // 提前过滤掉当前索引项，避免不必要的比较
        const filteredOptions = props.modelValue.options.filter((item, i) => i !== currIndex.value);

        // 使用 find 检查是否存在重复值
        const duplicateItem = filteredOptions.find(item => item.value === form.value.value);
        if (duplicateItem) {
            Message.error('Value值已经存在');
            visible.value = true;
            return false;
        }

        props.modelValue.options[currIndex.value] = {
            ...props.modelValue.options[currIndex.value],
            value: form.value.value,
            content: form.value.content
        }

    }

    visible.value = false;
    currIndex.value = -1
    form.value = {
        value: '',
        content: ''
    }
}

const openDeleteMoal = (index) => {
    currDelIndex.value = index
    deleteModal.value = true
}
const deleteOption = () => {
    props.modelValue.options.splice(currDelIndex,1)
}
const orderSelectChange  = (newVal) => {
    if (newVal === props.modelValue.orders){
        return
    }
    props.changeOrder(newVal,props.modelValue.orders)
}
//监听值变化
watch(() => props.modelValue, (newVal, oldVal) => {
    currentOrder.value = props.modelValue.orders
}, {
    deep: true
})

const deleteQuestion = () => {
    Modal.warning({
        title: '提示',
        content: '确认删除该题目？',
        onOk: () => {
            console.log(props.modelValue)
            //调用删除
            props.delQuestion()
        }
    })
}

</script>

<template>
<div>
    <p class="text-center font-bold text-lg mb-3">{{ getQuestionTypeText(modelValue.type) }}</p>

    <p class="text-center font-bold mb-3">
        题目顺序：
        <a-select :style="{width:'80px'}" v-model="currentOrder" @change="orderSelectChange"
                  :trigger-props="{ autoFitPopupMinWidth: true }">
            <a-option  v-for="(item) in orderList" :key="item" :value="item">{{item }}</a-option>
        </a-select>
    </p>

    <!--    文本输入框 输入类型设置 输入类型 text 普通文本 password 密码 number 数字 email 邮箱-->
    <p class="text-center font-bold mb-3 mt-4" v-if="modelValue.type === 2">
        输入类型：
        <a-select class="mx-auto" v-model="modelValue.inputType" :style="{width:'120px'}" placeholder="选择输入类型">
            <a-option value="text">普通文本</a-option>
            <a-option value="password">密码</a-option>
            <a-option value="number">数字</a-option>
<!--            <a-option value="email">邮箱</a-option>-->
        </a-select>
    </p>

    <p class="text-center mx-4">
        是否必填：<a-switch v-model="modelValue.required"  :checked-value="1" :unchecked-value="0"/>
    </p>

    <a-divider/>

    <div v-if="modelValue.type === 0 || modelValue.type === 1">
        <div v-for="(option,index) in modelValue.options">
            <div class="text-center">选项{{index + 1}}：Value=
                <span class="font-bold mr-1">{{option.value}}</span>
                <span class="cursor-pointer mr-1">
                    <icon-edit @click="openOption(option,index)"/>
                </span>
                <span class="cursor-pointer">
                    <icon-delete @click="openDeleteMoal(index)" />
                </span>
            </div>
        </div>
        <div class="flex justify-center mt-3">
            <a-button type="primary" @click="openOption">添加选项</a-button>
        </div>
    </div>


    <div class="flex justify-center mt-3">
        <a-button status="danger" type="primary" @click="deleteQuestion">删除题目</a-button>
    </div>

    <a-modal width="55%" v-model:visible="visible" title="编辑选项" @ok="handleBeforeOk">
        <a-form :model="form">
            <a-form-item field="value" label="Value">
                <a-input v-model="form.value" />
            </a-form-item>
            <a-form-item field="content" label="内容">
                <SimpleWangEditor ref="wangeditor" :min-height="200" v-model="form.content"/>
            </a-form-item>
        </a-form>
    </a-modal>

    <a-modal v-model:visible="deleteModal" @ok="deleteOption" >
        <template #title>
            提示
        </template>
        <div>确认删除该选项？</div>
    </a-modal>
</div>
</template>

<style scoped>

</style>
